<template>
  <div class="heatmap-container">
    <div :id="chartId" class="heatmap-chart"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import {
  SciChartSurface,
  HeatmapRenderableSeries,
  HeatmapDataSeries,
  SciChartJsNavyTheme,
  HeatmapLegend,
  LinearColorPalette, // 线性颜色梯度
  NumericAxis,
  HeatmapColorMap,
} from 'scichart';

const chartId = ref('heatmap-chart-' + Math.random().toString(36).substring(2, 9));

onMounted(async () => {
  try {
    const { heatmapLegend, wasmContext } = await HeatmapLegend.create(chartId.value, {
      theme: {
        ...new SciChartJsNavyTheme(),
        sciChartBackground: '#14233CBB',
        loadingAnimationBackground: '#14233CBB',
      },
      yAxisOptions: {
        axisBorder: {
          borderLeft: 1,
          color: '#FFFFFF77',
        },
        majorTickLineStyle: {
          color: 'White',
          tickSize: 6,
          strokeThickness: 1,
        },
        minorTickLineStyle: {
          color: 'White',
          tickSize: 3,
          strokeThickness: 1,
        },
      },
      colorMap: {
        minimum: 0,
        maximum: 200,
        gradientStops: [
          { offset: 1, color: '#EC0F6C' },
          { offset: 0.9, color: '#F48420' },
          { offset: 0.7, color: '#DC7969' },
          { offset: 0.5, color: '#67BDAF' },
          { offset: 0.3, color: '#50C7E0' },
          { offset: 0.2, color: '#264B9377' },
          { offset: 0, color: 'Transparent' },
        ],
      },
    });
  } catch (error) {
    console.error('Error initializing SciChart:', error);
  }
});
</script>

<style lang="scss" scoped>
.heatmap-container {
  width: 100%;
  height: 400px;
  .heatmap-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
